<template>
    <div>
        <el-card>
            <!-- 按钮-->
            <el-row type="flex" justify="start">
                <el-button type="primary" size="mini" @click="mergeYear = !mergeYear">{{ mergeYear ? '取消' : '' }}单纯合并年份
                </el-button>
                <el-button type="primary" size="mini" :disabled="mergeCity2" @click="mergeCity = !mergeCity">{{ mergeCity ? '取消' : '' }}单纯合并市
                </el-button>
                <el-button type="primary" size="mini" :disabled="mergeCity" @click="mergeCity2 = !mergeCity2">{{ mergeCity2 ? '取消' : ''
                }}根据年份合并市
                </el-button>
                <el-button type="primary" size="mini" @click="mergeStore = !mergeStore">{{ mergeStore ? '取消' : ''
                }}根据年份+市合并店名
                </el-button>
            </el-row>
            <!--列表数据-->
            <el-table :span-method="mergeCell" border class="mt20" :data="tableList" size="mini" row-key="id"
                :header-cell-style="{
                    background: 'linear-gradient(to top,#DFEFFF,#EEF7FC)',
                    color: '#226FB4',
                    borderColor: '#CDDEED',
                }">
                <el-table-column label="年份" prop="year" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column label="市" prop="city" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column label="店名" prop="store" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column label="员工数量" prop="member" align="center" show-overflow-tooltip></el-table-column>
            </el-table>
        </el-card>
    </div>
</template>
  
<script>
export default {
    name: "MergeTableCell",
    components: {},
    data() {
        return {
            tableList: [
                {
                    id: 'abcd01',
                    year: '2023',
                    city: '南京市',
                    store: '蜜雪冰城',
                    member: '30',
                }, {
                    id: 'abcd02',
                    year: '2023',
                    city: '南京市',
                    store: '蜜雪冰城',
                    member: '50',
                }, {
                    id: 'abcd03',
                    year: '2023',
                    city: '马鞍山市',
                    store: '蜜雪冰城',
                    member: '50',
                }, {
                    id: 'abcd04',
                    year: '2024',
                    city: '马鞍山市',
                    store: '蜜雪冰城',
                    member: '50',
                }, {
                    id: 'abcd05',
                    year: '2024',
                    city: '南京市',
                    store: '瑞幸咖啡',
                    member: '50',
                }, {
                    id: 'abcd06',
                    year: '2024',
                    city: '南京市',
                    store: '瑞幸咖啡',
                    member: '30',
                }, {
                    id: 'abcd07',
                    year: '',
                    city: '南京市',
                    store: '瑞幸咖啡',
                    member: '30',
                }, {
                    id: 'abcd08',
                    year: '',
                    city: '南京市',
                    store: '瑞幸咖啡',
                    member: '30',
                },
            ],
            mergeYear: false,
            mergeCity: false,
            mergeCity2: false,
            mergeStore: false,
        };
    },
    computed: {},
    created() { },
    methods: {
        // 合并单元格
        mergeCell({ rowIndex, columnIndex }) {
            if (this.mergeYear) {
                switch (columnIndex) {
                    case 0:
                        return this.mergeTableCell(this.tableList, "year", rowIndex);
                }
            }
            if (this.mergeCity) {
                switch (columnIndex) {
                    case 1:
                        return this.mergeTableCell(this.tableList, "city", rowIndex);
                }
            }
            if (this.mergeCity2) {
                switch (columnIndex) {
                    case 1:
                        return this.mergeTableCell(this.tableList, "city", rowIndex, ['year']);
                }
            }
            if (this.mergeStore) {
                switch (columnIndex) {
                    case 2:
                        return this.mergeTableCell(this.tableList, "store", rowIndex, ['year', 'city']);
                }
            }
        },
    },
};
</script>
  
<style scoped lang="scss"></style>
  